<template>
	<view class="container">
		<view class="tui-flex">
			<view class="tui-cube-box" @tap='log'>
				<view class="tui-cube tui-cube-1">芸藏阁</view>
				<view class="tui-cube tui-cube-2">V{{version}}</view>
				<view class="tui-cube tui-cube-3">博物馆</view>
				<view class="tui-cube tui-cube-4">V{{version}}</view>
				<view class="tui-cube tui-cube-5">小程序</view>
				<view class="tui-cube tui-cube-6">V{{version}}</view>
			</view>

		</view>
		<view class="tui-content-box">
			<view class="tui-content">尊敬的用户，欢迎体验芸藏阁线上博物馆小程序！</view>
			<view class="tui-content">
				芸藏阁线上博物馆小程序主要以展示、分享、交流个人藏品为主，用户可通过小程序浏览藏品信息，收藏喜爱的藏品等。
			</view>
			
			<view class="tui-content">
				小程序主要分为四个模块:首页、藏品、收藏和我的。
			</view>
			
			<view class="tui-content">
				"首页"板块:
				藏品分类，可快捷导航至相应分类藏品列表。
				藏品推荐，向用户推荐优秀的藏品信息。
			</view>
			
			<view class="tui-content">
				"藏品"板块:
				藏品列表，对藏品进行归类展示。
				藏品搜索，可快捷筛选藏品信息。
			</view>
			
			<view class="tui-content">
				"收藏"板块:
				展示用户个人收藏的藏品信息,也可对以收藏的藏品进行取消收藏。
			</view>
			
			<view class="tui-content">
				"我的"板块:
				个人信息，用户个人信息维护。
				浏览记录，用户个人查看藏品的浏览记录。
				意见反馈，为用户提供意见反馈的入口，用户可提交小程序使用过程遇到的问题及建议。
				帮助中心，芸藏阁线上博物馆小程序功能介绍。
			</view>
			<view class="tui-content">项目可能存在缺陷或者bug，如果您在使用过程中发现问题或者有更好的建议，可反馈给我们。</view>
			
			<view class="tui-content">
				您可以通过反馈或者以下方式联系我们！
			</view>
			<view class="tui-content tui-content-email" @tap="copy('370036470@qq.com','邮箱已复制')">邮箱：370036470@qq.com</view>
			<view class="tui-content tui-content-email" @tap="copy('17629219261','手机号已复制')">手机号：17629219261</view>
			<view class="tui-footer">
				<image src='/static/' class="tui-applets" mode="widthFix"></image>
				<view class="tui-footer-text">扫描二维码，您的朋友也可以体验芸藏阁线上博物馆小程序！</view>
			</view>
		</view>

	</view>
</template>

<script>
	const thorui = require("@/common/tui-clipboard/tui-clipboard.js")
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['version']),
		data() {
			return {

			}
		},
		methods: {
			copy: function(text,msg) {
				const that = this
				thorui.getClipboardData(text, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.tui.toast(msg)
					} else {
						this.tui.toast("内容复制失败")
					}
					// #endif
				})
			},
			log: function() {
				uni.navigateTo({
					url: '../log/log'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 0 50rpx 40rpx 50rpx;
		box-sizing: border-box;
	}

	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40px;
	}

	.tui-cube-box {
		width: 60px;
		height: 60px;
		position: relative;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		animation: tui-go 4s linear infinite;
		z-index: 99;
	}

	@keyframes tui-go {
		0% {
			-webkit-transform: rotateX(0) rotateY(0);
			transform: rotateX(0) rotateY(0);
		}

		100% {
			-webkit-transform: rotateX(360deg) rotateY(360deg);
			transform: rotateX(360deg) rotateY(360deg);
		}
	}

	.tui-cube {
		width: 60px;
		height: 60px;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		/* word-break: break-all;
		word-wrap: break-word; */
	}

	.tui-cube-1 {
		background-color: #fff;
		-webkit-transform: rotateY(90deg) translateZ(-30px);
		transform: rotateY(90deg) translateZ(-30px);
		color: #333 !important;
	}

	.tui-cube-2 {
		background-color: #8a5966;
		-webkit-transform: rotateY(90deg) translateZ(30px);
		transform: rotateY(90deg) translateZ(30px);
	}

	.tui-cube-3 {
		background-color: #5c8dff;
		-webkit-transform: rotateX(90deg) translateZ(30px);
		transform: rotateX(90deg) translateZ(30px);
	}

	.tui-cube-4 {
		background-color: #ed3f14;
		-webkit-transform: rotateX(90deg) translateZ(-30px);
		transform: rotateX(90deg) translateZ(-30px);
	}

	.tui-cube-5 {
		background-color: #ff7900;
		-webkit-transform: translateZ(30px);
		transform: translateZ(30px);
	}

	.tui-cube-6 {
		background-color: #19be6b;
		-webkit-transform: translateZ(-30px);
		transform: translateZ(-30px);
	}

	.tui-content-box {
		width: 100%;
		margin-top: 50px;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx #eee;
	}

	.tui-content {
		color: #333;
		font-size: 30rpx;
		line-height: 44rpx;
		padding: 10rpx 0;
		text-align: justify;
	}

	.tui-content-email {
		color: #5677fc !important;
	}

	.tui-footer {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
	}

	.tui-applets {
		width: 80px;
		height: 80px;
		display: block;
	}

	.tui-footer-text {
		font-size: 24rpx;
		color: #999;
		padding-left: 20rpx;
		width: 300rpx;
	}
</style>
